<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改订单')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-order-edit" th:object="${carOrder}">
        <h4 class="form-header h4">订单信息</h4>
        <input name="id" th:field="*{id}" type="hidden">
        <input name="shopId" th:value="${goodsSpu.createBy}" type="hidden">
        <input type="hidden" name="status" value="1">
        <input type="hidden" name="isPay" value="N">
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">销售金额：</label>
            <div class="col-sm-8">
                <input name="salesPrice" th:field="*{salesPrice}" class="form-control" type="text" required readonly>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">收货地址：</label>
            <div class="col-sm-8">
                <select name="userAddressId" class="form-control m-b" required>
                    <option value="">--请选择--</option>
                    <option th:each="dict : ${userAddresses}" th:text="${dict.detailInfo}"
                            th:value="${dict.id}"  ></option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注：</label>
            <div class="col-sm-8">
                <textarea name="remark" class="form-control">[[*{remark}]]</textarea>
            </div>
        </div>
        <h4 class="form-header h4">清单明细信息</h4>
        <div class="row">
            <div class="col-sm-12">
                <button type="button" class="btn btn-white btn-sm" onclick="addRow()"><i class="fa fa-plus"> 增加</i>
                </button>
                <button type="button" class="btn btn-white btn-sm" onclick="sub.delRow()"><i class="fa fa-minus"> 删除</i>
                </button>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="goodsSelect" hidden>
    <select name="" class="form-control goods-select" required onchange="getCountPrice();">
        <option value="">--请选择--</option>
        <option th:each="dict : ${goodsList}" th:text="${dict.name}" th:value="${dict.id}"
                th:attr="data-price=${dict.salesPrice}"></option>
    </select>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<script th:inline="javascript">
    var prefix = ctx + "eat/order";
    $("#form-order-edit").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {

            $.ajax({
                type: "post",
                url: prefix + "/edit",
                data: $('#form-order-edit').serialize(),
                success: function(r) {
                    if (r.code == web_status.SUCCESS) {
                        parent.layer.closeAll('iframe'); // 关闭当前frame
                        $.modal.msg("下单成功！跳转到订单支付页面");
                        $.modal.openTab("订单管理", "/eat/order?isPay=N");
                        window.parent.$.modal.closeLoading();
                    } else {
                        $.modal.closeLoading();
                        $.modal.msg(r.msg);
                    }
                }
            });






        }
    }

    $("input[name='paymentTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(function () {
        var options = {
            data: [[${carOrder.carOrderItemList}]],
            pagination: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            sidePagination: "client",
            columns: [{
                checkbox: true
            },
                {
                    field: 'index',
                    align: 'center',
                    title: "序号",
                    formatter: function (value, row, index) {
                        var columnIndex = $.common.sprintf("<input type='hidden' name='index' value='%s'>", $.table.serialNumber(index));
                        return columnIndex + $.table.serialNumber(index);
                    }
                },
                {
                    field: 'goodId',
                    align: 'center',
                    title: '商品',
                    formatter: function (value, row, index) {
                        $("#goodsSelect>select").attr("name", "carOrderItemList[" + index + "].goodId");
                        $("#goodsSelect>select").attr("data-index", index);
                        $("#goodsSelect>select").find("option").removeAttr("selected");
                        $("#goodsSelect>select").find("option[value='" + value + "']").attr("selected", "selected");
                        return $("#goodsSelect").html();


                    }
                },

                {
                    field: 'goodAmount',
                    align: 'center',
                    title: '数量',
                    formatter: function (value, row, index) {
                        if (!value) {
                            value = 1;
                        }
                        var html = $.common.sprintf("<input class='form-control' type='number'  onchange='getCountPrice();' name='carOrderItemList[%s].goodAmount' value='%s'>", index, value);
                        return html;
                    }
                },

                {
                    field: 'goodName',
                    width: 0,
                    formatter: function (value, row, index) {
                        var html = $.common.sprintf("<input name='carOrderItemList[%s].goodName' value='%s' type='hidden' />", index, value);
                        return html;
                    }
                },
                {
                    field: 'goodPrice',
                    align: 'center',
                    title: '价格',
                    formatter: function (value, row, index) {

                        var price = $("#goodsSelect>select").find("option[value='" + row.goodId + "']").attr("data-price");
                        if (!value && price) {
                            value = price;
                        }

                        var html = $.common.sprintf("<input readonly  class='form-control' type='text' name='carOrderItemList[%s].goodPrice' value='%s'>", index, value);
                        return html;
                    }
                },]
        };
        $.table.init(options);
    });

    function addRow() {
        var count = $("#" + table.options.id).bootstrapTable('getData').length;
        sub.editRow();

        $("#" + table.options.id).bootstrapTable('insertRow', {
            index: count,
            row: {
                index: $.table.serialNumber(count),
                goodId: "",
                goodName: "",
                goodAmount: "",
                goodPrice: ""

            }
        });
    }

    function getCountPrice() {

        var goodsIds = new Array();
        var salesPrice = 0;
        var i = 1;
        $("#bootstrap-table .goods-select").each(function () {
            console.log(i++)
            var value = $(this).val();
            if (value) {
                var index = $(this).attr("data-index");
                if (goodsIds.indexOf(value) > -1) {
                    // $(this).find("option[value='" + value + "']").val("");
                }
                goodsIds.push(value);
                var price = $(this).find("option[value='" + value + "']").attr("data-price");
                $("input[name='carOrderItemList[" + index + "].goodName']").val($(this).find("option[value='" + value + "']").text());
                var count = $("input[name='carOrderItemList[" + index + "].goodAmount']").val();

                if (count <= 0) {
                    $("input[name='carOrderItemList[" + index + "].goodAmount']").val(1);
                    count = 1;
                }
                if (undefined != price && count > 0) {
                    var countPrice = count * price;
                    $("input[name='carOrderItemList[" + index + "].goodPrice']").val(countPrice);
                    salesPrice += countPrice;
                }


            }
        })

        $("input[name='salesPrice']").val(salesPrice);


    }
</script>
</body>
</html>
